<template>
  <div>
    <div class="caidan">
      <img class="pic" src="../../assets/images/viptouxiang.png" alt="">
      <div class="menu">
        <ul ref="menuUl">
          <li class="li-warp" @click="setIndex(i)"  v-for="(item1,i) in menuList" :key="i">
            <div class="hg">
                <img src="../../assets/logo.png" alt="">
            </div>
            <p class="p2" v-if="i == currentIndex"><span>正在浏览</span></p>
            <p class="p1" v-else>{{item1}}</p>         
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
export default{
  data(){
    return {
      active: 0,
      menuList:[
        '菜单1','菜单2','菜单3','菜单4','菜单5',
      ],
      scrollx: 0, // 右侧滑动的Y轴坐标 (滑动过程时实时变化)
      tops: [], // 所有右侧分类li的top组成的数组  (列表第一次显示后就不再变化)
    }
  },
  mounted(){
    this.active = window.sessionStorage.getItem('activePath')
    this.$nextTick(() => {
      this._initScroll()
      this._initTops()
    })
  },
  computed: {
      // 计算得到当前分类的下标
      currentIndex() {// 初始和相关数据发生了变化
        // 得到条件数据
        const {scrollx, tops} = this
        // console.log(scrollx, tops)
        // 根据条件计算产生一个结果
        if(scrollx>=70 && scrollx< tops[1]){
          return 1
        }
        const index = tops.findIndex((top, index) => {
          // scrollY>=当前top && scrollY<下一个top
          return scrollx >= top-10 && scrollx < tops[index + 1]-10
        })
        // 返回结果
        return index
      }
  },
  methods: {
    _initScroll () {  
      // 动态计算ul的宽度
      const ul = this.$refs.menuUl     
      const lis =this.$refs.menuUl.getElementsByClassName('li-warp')
      const liWidth = lis[0].clientWidth
      const count = lis.length
      // const count = this.info.pics.length
      ul.style.width = (liWidth) * count+560+ 'px'
      this.menus = new BScroll('.menu', {
        click:true,
        probeType: 2,
        scrollX: true // 水平滑动
      })
              // 给右侧列表绑定scroll监听
      this.menus.on('scroll', ({x}) => {
        // console.log(x, y)
        this.scrollx = Math.abs(x)
      })
    // 给右侧列表绑定scroll结束的监听
      this.menus.on('scrollEnd', ({x}) => {
        // console.log('scrollEnd', x, y)
        this.scrollx = Math.abs(x)
      })
    },
    setIndex (i) {  
      window.sessionStorage.setItem('activePath', i)
      this.active = i
      //点击元素获取元素位置
      const lis =this.$refs.menuUl.getElementsByClassName('li-warp')
      // lis[i].offsetTop
      // console.log(lis[i].getBoundingClientRect())

      //让点击的元素滚到第一个位置去
      this.clickMenuItem(i)
    },
        // 初始化tops
    _initTops() {
      // 1. 初始化tops
      const tops = []
      let top = 0
      tops.push(top)
      // 2. 收集
      // 找到所有分类的li
      const lis2 = this.$refs.menuUl.getElementsByClassName('li-warp')
      // console.log(123,lis2)
      Array.prototype.slice.call(lis2).forEach(li => {
        top += li.clientWidth
        tops.push(top)
      })

      // 3. 更新数据
      this.tops = tops
      // console.log(tops)
    },
    clickMenuItem(index) {
      // console.log(index)
      // 使用右侧列表滑动到对应的位置

      // 得到目标位置的scrollx
      const scrollx = this.tops[index]
      // 立即更新scrollY(让点击的分类项成为当前分类)
      this. scrollx = scrollx
      // 平滑滑动右侧列表
      // console.log(scrollx)
      this.menus.scrollTo( -scrollx,0, 300)
    },
  },
  // watch: {
  //   shopdy (a) {
  //     this.$nextTick(() => {
  //       this._initScroll()
  //       this._initTops()
  //     })
  //   }
  // }
}
</script>
<style lang='less' scoped>
.hg{
  height:50px;
}
.pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  z-index: 2;
}
.caidan {
  position: relative;
  left: 0;
}

.act {
  font-size: 16px;
  color: red;
}
.menu {
  overflow: hidden;
  background-color: #f7f7f7;
  ul {
    display: flex;
    justify-content: flex-start;
    li{ 
      width:100px;
      font-size: 20px;
      font-weight: bold;
      text-align: left;
      .img,img{
        margin-left: 4px;
        margin-top: 4px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
      .p1 {
        margin: 10px 0;
        width: 50px;
        font-size: 16px;
        color: #333333;
        font-weight:400;
        overflow:hidden;
        display:-webkit-box;
        text-overflow:ellipsis;
        -webkit-line-clamp:1;
        -webkit-box-orient:vertical;
        white-space:normal;
      }
      .p2 {
          margin-top: 5px;
        span {
          color: #fff;
          font-size: 12px;
          line-height:12px;
          padding: 3px 3px;
          background:linear-gradient(225deg,rgba(255,71,93,1) 0%,rgba(254,156,101,1) 100%);
          border-radius:5px;
          animation-name: hd; 
          animation-duration: 1s; 
          animation-iteration-count: 1; 
          }
          @keyframes hd {
            0%{
              opacity: 0; 
            }
            50%{
              opacity: 0.6;
            }
            100%{
              opacity: 1;

            }
          }
      }
    }
  }
}
</style>